<template>
  <div class="vote">
    <div class="info-top">
      <div class="img-box">
        <el-image
          style="width: 80px; height: 80px"
          :src="entriesDetails.pic_url"
          fit="cover"
        ></el-image>
      </div>
      <div class="title-info">
        <h2>{{ entriesDetails.title }}</h2>
        <p>参赛单位：{{ entriesDetails.company_name }}</p>
        <p>参赛团队：{{ entriesDetails.team_title }}</p>
      </div>
    </div>
    <div class="info-content">
      <p>作品简介：{{ entriesDetails.content }}</p>
    </div>
    <div class="info-bottom">
      <div class="bottom-left">
        当前票数：<span>{{ entriesDetails.poll_count }}</span>
      </div>
      <div class="bottom-right" @click="changeVote()">
        勾选投票
        <div class="checkbox" :class="entriesDetails.checked ? 'checked' : ''">
          <i class="el-icon-check"></i>
        </div>
      </div>
    </div>
    <div class="vote-btn">
      <el-button @click="vote()">立即投票</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "vote",
  data() {
    return {
      voteId:''
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    ...mapActions(["getEntriesDetails", "sendEntriesVote"]),
    getDetail() {
      let data = {
        id: this.$route.query.id,
      };
      this.getEntriesDetails(data);
    },
    changeVote() {
      this.entriesDetails.checked = !this.entriesDetails.checked;
      this.$forceUpdate();
    },
    vote() {
      let arry = [];
      if(this.entriesDetails.checked == true){
        arry.push(this.$route.query.id);
      };
      if (arry.length > 0) {
        // 走投票流程
        this.sendEntriesVote({ entries_ids: arry }).then((res) => {
          this.$message({
            message: res.data.message,
            type: "success",
          });
        });
      } else {
        // 提示
        this.$message.error("请先选择你支持的作品~");
      }
    },
  },
  watch: {
    $route(to) {},
  },
  computed: {
    ...mapGetters(["entriesDetails"]),
  },
};
</script>

<style scoped>
.vote {
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
}
.img-box{
  width: 80px;
  height: 80px;
}
.title-info {
  width: 100%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
.title-info h2 {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #1b1b1b;
  margin-top: 20px;
}
.title-info p {
  margin-top: 5px;
}
.info-content {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  line-height: 28px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
}
.info-bottom {
  margin-top: 15px;
  height: 40px;
  border-top: 1px solid #dcdcdc;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #333333;
}
.info-bottom span {
  color: #0b4696;
  font-weight: 500;
}
.bottom-right {
  cursor: pointer;
}
.checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  line-height: 18px;
}
.checkbox i {
  color: #fff;
  font-size: 14px;
}
.checked {
  background-color: #0b4696;
  border: 1px solid #0b4696;
}
.vote-btn {
  width: 100%;
  text-align: center;
  margin-top: 40px;
}
.vote-btn >>> .el-button {
  width: 120px;
  height: 40px;
  background: #0b4696;
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
}
</style>